<template>
    <a-tooltip placement="bottom">
        <template #title>
            <span>切换皮肤</span>
        </template>
        <!-- :icon="h(SkinOutlined)" -->
        <a-button type="text" @click="open = !open" :icon="icon" />
    </a-tooltip>


    <a-drawer v-model:open="open" title="皮肤设置" :closable="false">
        <a-radio-group v-model:value="Theme">
            <a-radio :style="radioStyle" v-for="item in ThemeStore.list" :key="item.key" :value="item.key">
                {{ item.name }}
            </a-radio>
        </a-radio-group>
    </a-drawer>
</template>

<script setup>
// import { SkinOutlined } from '@ant-design/icons-vue'
import { watch, ref, h, inject, reactive } from 'vue';
import { UseThemeStore } from './theme'

const icon = h('span', { class: 'iconfont icon-pifu' })

const open = ref(false);
const ThemeStore = UseThemeStore();
const Theme = ref(ThemeStore.Ans);
const radioStyle = reactive({ display: 'flex', height: '30px', lineHeight: '30px', });
const AppRunEvent = inject('AppRunEvent');

watch(Theme, (v) => {
    AppRunEvent('Theme.Change', ThemeStore.changeTheme(v));
}, { immediate: true })


</script>
<style scoped>
.Skin {
    width: 100%;
    height: 100%;
}
</style>
